<template>
  <div class="home">
    <b-container fluid>
      <b-row>
        <b-col sm="3">
          <label>用户名</label>
        </b-col>
        <b-col sm="9">
          <b-form-input type="text" v-model="form.username"/>
        </b-col>
        <b-col sm="3">
          <label>密码</label>
        </b-col>
        <b-col sm="9">
          <b-form-input type="password" v-model="form.password"/>
        </b-col>
      <p class="align-middle">
        <b-button @click="login(form)">登陆</b-button>
      </p>
      </b-row>
    </b-container>
    <b-container style="margin-top:100px;">
      <b-button @click="getUserList()">用户列表</b-button>
      <b-table striped hover :items="response.results"></b-table>
    </b-container>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'home',
  data () {
    return {
      response: {},
      form: {},
      token: '',
    }
  },
  methods: {
    login(e) {
      axios.post('http://localhost:8000/api-token-auth/', e).then(res => {
        const { token } = res.data
        this.$bvToast.toast(`请求成功`, {
          title: token
        })
        this.token = token
      })
    },
    getUserList() {
      axios({
        method: 'GET',
        url: 'http://localhost:8000/users/',
        headers: {
          Authorization: `JWT ${this.token}`
        }
      }).then(res => {
        this.response = res.data
      })
    }
  }
}
</script>
